<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收银台</title>
    <link rel="stylesheet" href="/static/css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap-grid.css">
    <link rel="stylesheet" href="/static/css/cashier.css">
</head>

<body>

    <header class="header">
        <div class="header__wrap">
            <div class="container">
                <div class="row ">
                    <div class="col-12">
                        <div class="header__content d-flex justify-content-between">
                            <div class='header__logo d-flex align-items-center'>
                                <svg t="1610806307396" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="6171" width="26" height="26">
                                    <path
                                        d="M1024 199.18v410.38c0 110-89.54 199.18-200 199.18H200c-110.46 0-200-89.18-200-199.18V199.18C0 89.17 89.54 0 200 0h624c110.46 0 200 89.17 200 199.18z m-553.95 317v46.72q0.9 19.32 12 28.75t30.9 9.43q40.14 0 41.95-38.18v-47.58l86.6 0.45q11.73-0.9 18.49-8.76t7.67-19.54a33.48 33.48 0 0 0-7.67-19.32q-6.77-8.09-18.49-9h-86.6v-27.4l86.15-0.45q11.73-0.9 18.72-9a33.26 33.26 0 0 0 7.89-19.76q-0.9-11.23-7.67-18.42t-18.49-8.09h-66.3l69.91-113.2q9-11.68 9-24.71a50.37 50.37 0 0 0-4.28-15.27 24.48 24.48 0 0 0-7.22-9 27.29 27.29 0 0 0-9.92-4.49 74.75 74.75 0 0 0-12.4-1.8 43.43 43.43 0 0 0-19.4 7.19 54.51 54.51 0 0 0-14 13.48l-75.34 125.83L443 229.18A65.48 65.48 0 0 0 429 215a36.39 36.39 0 0 0-19.4-7.41q-18.49 2.25-25.26 10.11t-9 20.44a36.94 36.94 0 0 0 3.61 18.19 67.53 67.53 0 0 0 8.57 13.7l60.44 106H383q-12.18 0.9-18.72 8.09t-7.89 18.42q1.35 11.68 7.89 19.32t18.72 8.56l87.05 0.45v28.3H383q-12.18 0.9-18.72 8.09t-7.89 18.42a43.81 43.81 0 0 0 7.89 20.44q6.54 9.21 18.72 10.11h87.05z"
                                        fill="#4375ff" p-id="6172"></path>
                                    <path
                                        d="M264.96 903.6m60.2 0l373.67 0q60.2 0 60.2 60.2l0 0q0 60.2-60.2 60.2l-373.67 0q-60.2 0-60.2-60.2l0 0q0-60.2 60.2-60.2Z"
                                        fill="#4375ff" p-id="6173"></path>
                                </svg>

                                <span class="ml-2">收银台</span>
                            </div>
                            <a href="/order" class="header__order">
                                <svg class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" width="18" height="18">
                                    <path
                                        d="M455.253333 657.92c117.76 0 213.333333-95.573333 213.333334-213.333333s-95.573333-213.333333-213.333334-213.333334-213.333333 95.573333-213.333333 213.333334 95.573333 213.333333 213.333333 213.333333z m229.76-22.4l169.813334 169.813333c16.64 16.64 16.64 43.733333 0 60.373334-16.64 16.64-43.733333 16.64-60.373334 0l-172.8-172.8c-47.573333 32-104.746667 50.56-166.4 50.56-164.906667 0-298.666667-133.76-298.666666-298.666667s133.76-298.666667 298.666666-298.666667 298.666667 133.76 298.666667 298.666667c0 72.32-25.813333 138.88-68.906667 190.72z"
                                        fill="#ffffff"></path>
                                </svg>
                                <span>订单查询</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="container">
        <section class='section details__section section--first  section--last'>
            <div class='container'>
                <div class="row">
                    <div class="col-12">
                        <div class="content" class="row justify-content-center">
                            <h2 class="text-center order_title_tips">{$title}</h2>

                            <!-- 显示微信  -->
                            <div class="isMobileWechat">
                            </div>
                            <div id="qrcode" class="row code_cs  justify-content-center"></div>
                            <div class="order">
                                <span>订单号：{$data['out_trade_no']}</span>
                            </div>
                            <div class="price">
                                <span>{$amount}</span>
                                <span>元</span>
                            </div>
                            <div class="page_tip">
                                <img
                                    src="">
                                <span>正在检测付款状态 <p>1</p> 次</span>

                                <div class="page_tip">
                                    <span> 付款成功后会自动跳转，未跳转时请耐心等待15秒</span>
                                </div>
                            </div>

                        </div>
                    </div>


                </div>
            </div>
        </section>

        <script src="/static/js/jquery/jquery.min.js"></script>
        <script src="/static/js/jquery/jquery.qrcode.min.js"></script>
        <script src="/static/layer/layer.js"></script>
        <script>
            // 假设后端传过来的二维码链接为 qrcodeUrl
            var qrcodeUrl = "{$url}";

            (function () {
                $('#qrcode').empty().qrcode({ width: 200, height: 200, text: qrcodeUrl });
            })();

            // 10s后开始轮询订单状态
            setTimeout(function () {
                var out_trade_no = "{$data['out_trade_no']}";
                var url = '/api/order/orderStatus';
                var query = function () {
                    $.get(url, { trade_no: out_trade_no }, function (res) {
                        if (res.code === 1) {
                            layer.msg('支付成功');
                            location.href = '/order?orderId=' + out_trade_no;
                        } else {
                            setTimeout(query, 3000);
                        }
                        // 检测次数
                        var count = parseInt($('.page_tip span p').text());
                        $('.page_tip span p').text(count + 1);
                    });
                };
                query();
            }, 10000);

            // 检测是否是手机 且 {$title} 包含 微信字符
            var title = "{$title}";

            function isMobile() {
                return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
            }

            function titleContainsWeChat() {
                return title.indexOf('微信') !== -1;
            }
            // <a href="weixin://" class="header__order"> 唤醒微信 </a>
            if (isMobile() && titleContainsWeChat()) {
                $('.order_title_tips').text('');
                $('.isMobileWechat').html(`
                   <h3>手机微信支付地址  </h3>
                    <div class="order order_url font12">
                     <div class="url">${qrcodeUrl} </div>
                     <a onclick="copyText(qrcodeUrl)" class="copy"> 复制 </a>
                    </div>
                    <div class="page_tip">
                    <span class="font_blod"> 将以上链接发到自己微信后，点击即可进入支付 </span>
                    </div>
                `);
            }

            // js原生复制
            function copyText(text) {
                var input = document.createElement('input');
                input.value = text;
                document.body.appendChild(input);
                input.select();
                document.execCommand('copy');
                document.body.removeChild(input);
                layer.msg('复制成功');
            }

        </script>

</body>

</html>